<template>
  <basic-container>
    <!-- <el-page-header @back="goBack" content="创建指标"></el-page-header> -->
    <div>
      <el-button @click="goBack" icon="el-icon-back" type="text" size="small">返回</el-button>
    </div>
    <el-divider></el-divider>
    <template v-if="!currentTypeMeasure">
      <el-row :gutter="20" type="flex">
        <el-col class="cur-p" v-for="(item) in measureTypes" :span="24 / measureTypes.length" :key="item.name">
          <el-card class="select-measure-card h-100p" @click.native="currentTypeMeasure = item" :class="{'active': currentTypeMeasure && currentTypeMeasure.index === item.index}" shadow="hover">
            <div class="pad-b-10 fts-18">
              <span>{{item.name}}</span>
            </div>
            <div class="fts-14 lh-24 pad-tb-10">
              <span>说明：{{item.desc}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </template>
    <template v-if="currentTypeMeasure">
      <accuracy v-if="currentTypeMeasure && currentTypeMeasure.value === 'ACCURACY'" @back="close" :measureType="currentTypeMeasure"></accuracy>
      <profiling v-if="currentTypeMeasure && currentTypeMeasure.value === 'PROFILING'" @back="close" :measureType="currentTypeMeasure"></profiling>
    </template>

  </basic-container>
</template>
<script>

import accuracy from './accuracy';
import profiling from './profiling';

export default {
  components: {
    accuracy,
    profiling
  },
  data(){
    return {
      currentTypeMeasure: null,
      measureTypes: [
        {
          index: 0,
          name: 'Accuracy',
          value: 'ACCURACY',
          bgColor: '#F56C6C',
          steps: ['选择来源' , '选择目标' , '映射源和目标' , '分区配置' , '配置'],
          desc: '假设源表A有1000条记录，目标表B仅有999条记录与选定字段的A完全匹配，则准确率（％）= 999/1000 * 100％= 99.9％'
        },
        {
          index: 1,
          name: 'Data Profiling',
          value: 'PROFILING',
          bgColor: '#409EFF',
          steps: ['选择目标' , '选择模型' , '分区配置' , '配置'],
          desc: '检查一组允许值内的数据范围'
        },
        // {
        //   name: 'Publish',
        //   value: 'Publish',
        //   bgColor: '#67C23A',
        //   steps: ['配置'],
        //   desc: '任何数据...'
        // },
        // {
        //   name: 'JSON/YAML measure',
        //   value: 'JSON/YAML measure',
        //   bgColor: '#E6A23C',
        //   steps: ['配置'],
        //   desc: '使用自定义配置（例如自定义spark sql）进行测量'
        // }
      ]
    }
  },
  mounted(){

  },
  methods: {
    goBack(){
      if(this.currentTypeMeasure){
        this.$confirm(`您所编辑的数据都会丢失，确定要返回？` , `提示`).then(() => {
          this.currentTypeMeasure = null;
        })
      }else{
        this.$parent.showType = 'list';
      }
    },
    close(){
      this.$parent.showType = 'list';
    }
  }
}
</script>
<style lang="scss">
  .select-measure-card{
    background: #e5e9f2 !important;
    transition: background .5s;
  }
  .select-measure-card:hover{
    background: #409EFF !important;
    color: #fff !important;
    i{
      color: #fff;
    }
    .el-step__title.is-process,.el-step__title.is-wait{
      color: #fff;
      font-size: 14px;
    }
  }
</style>